<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<meta name="format-detection" content="telephone=no" />
    <title>约美丽</title>
    
    <link rel="stylesheet" href="style/jquery.mmenu-5.0.3.css" />
    <link rel="stylesheet" href="style/mobiscroll.css" />
    <link rel="stylesheet" href="style/shoplist.css" />
    <link rel="stylesheet" href="style/hhframe-1.0.0.css" />
    <script src="script/jquery-1.11.1.min.js"></script>
    <script src="script/jquery.mmenu-5.0.3.js"></script>
    <script src="script/mobiscroll.js"></script>
    <script src="script/jquery.iscroll.5.js"></script>
    <script src="script/hhframe-1.0.0.js"></script>
    <script src="script/shoplist.js"></script>
</head>
<body>
  
  <div class="framepage shoplist">
    
    <!-- header -->
    <div class="header Searcher">
      <a href="#set_city" class="pos-l">上海</a>
      <h1 class="hd-title">
        <form class="fm" action="shoplist.html">
        <input type="text" class="txt" placeholder="商户/服务项目" />
        <input type="submit" class="sub" />
        </form>
      </h1>
      <a href="#set_chanel" class="pos-r">美发美体</a>
    </div>
    
    <!-- content -->
    <div class="wrapper">
    <div class="content">
      
      <ul class="cate">
      <li class="sort selected"><a href="javascript:;">综合</a></li>
      <li class="sort down"><a href="javascript:;">销量</a></li>
      <li class="sort"><a href="javascript:;">价格</a></li>
      <li class="sort"><a href="javascript:;">评价</a></li>
      <li><a href="#Filter">筛选</a></li>
      </ul>
      
      <ul class="shops">
      <li>
        <a href="shopdetail.html">
        <img src="image/banner_1.jpg" class="shopimg" />
        <div>
        <p class="name">上海时尚来袭美容院</p>
        <p class="info"><span class="stars star4">星级</span><span class="price">人均：120 元</span></p>
        <p class="addr">地址：XXXXXXX</p>
        <p class="dist">距离：1.5km</p>
        </div>
        </a>
      </li>
      <li>
        <a href="shopdetail.html">
        <img src="image/banner_1.jpg" class="shopimg" />
        <div>
        <p class="name">上海时尚来袭美容院</p>
        <p class="info"><span class="stars star5">星级</span><span class="price">人均：120 元</span></p>
        <p class="addr">地址：XXXXXXX</p>
        <p class="dist">距离：1.5km</p>
        </div>
        </a>
      </li>
      <li>
        <a href="shopdetail.html">
        <img src="image/banner_1.jpg" class="shopimg" />
        <div>
        <p class="name">上海时尚来袭美容院</p>
        <p class="info"><span class="stars star5">星级</span><span class="price">人均：120 元</span></p>
        <p class="addr">地址：XXXXXXX</p>
        <p class="dist">距离：1.5km</p>
        </div>
        </a>
      </li>
      <li>
        <a href="shopdetail.html">
        <img src="image/banner_1.jpg" class="shopimg" />
        <div>
        <p class="name">上海时尚来袭美容院</p>
        <p class="info"><span class="stars star4">星级</span><span class="price">人均：120 元</span></p>
        <p class="addr">地址：XXXXXXX</p>
        <p class="dist">距离：1.5km</p>
        </div>
        </a>
      </li>
      <li>
        <a href="shopdetail.html">
        <img src="image/banner_1.jpg" class="shopimg" />
        <div>
        <p class="name">上海时尚来袭美容院</p>
        <p class="info"><span class="stars star5">星级</span><span class="price">人均：120 元</span></p>
        <p class="addr">地址：XXXXXXX</p>
        <p class="dist">距离：1.5km</p>
        </div>
        </a>
      </li>
      <li>
        <a href="shopdetail.html">
        <img src="image/banner_1.jpg" class="shopimg" />
        <div>
        <p class="name">上海时尚来袭美容院</p>
        <p class="info"><span class="stars star5">星级</span><span class="price">人均：120 元</span></p>
        <p class="addr">地址：XXXXXXX</p>
        <p class="dist">距离：1.5km</p>
        </div>
        </a>
      </li>
      <li>
        <a href="shopdetail.html">
        <img src="image/banner_1.jpg" class="shopimg" />
        <div>
        <p class="name">上海时尚来袭美容院</p>
        <p class="info"><span class="stars star5">星级</span><span class="price">人均：120 元</span></p>
        <p class="addr">地址：XXXXXXX</p>
        <p class="dist">距离：1.5km</p>
        </div>
        </a>
      </li>
      <li>
        <a href="shopdetail.html">
        <img src="image/banner_1.jpg" class="shopimg" />
        <div>
        <p class="name">上海时尚来袭美容院</p>
        <p class="info"><span class="stars star5">星级</span><span class="price">人均：120 元</span></p>
        <p class="addr">地址：XXXXXXX</p>
        <p class="dist">距离：1.5km</p>
        </div>
        </a>
      </li>
      <li>
        <a href="shopdetail.html">
        <img src="image/banner_1.jpg" class="shopimg" />
        <div>
        <p class="name">上海时尚来袭美容院</p>
        <p class="info"><span class="stars star5">星级</span><span class="price">人均：120 元</span></p>
        <p class="addr">地址：XXXXXXX</p>
        <p class="dist">距离：1.5km</p>
        </div>
        </a>
      </li>
      <li>
        <a href="shopdetail.html">
        <img src="image/banner_1.jpg" class="shopimg" />
        <div>
        <p class="name">上海时尚来袭美容院</p>
        <p class="info"><span class="stars star5">星级</span><span class="price">人均：120 元</span></p>
        <p class="addr">地址：XXXXXXX</p>
        <p class="dist">距离：1.5km</p>
        </div>
        </a>
      </li>
      <li>
        <a href="shopdetail.html">
        <img src="image/banner_1.jpg" class="shopimg" />
        <div>
        <p class="name">上海时尚来袭美容院</p>
        <p class="info"><span class="stars star5">星级</span><span class="price">人均：120 元</span></p>
        <p class="addr">地址：XXXXXXX</p>
        <p class="dist">距离：1.5km</p>
        </div>
        </a>
      </li>
      <li>
        <a href="shopdetail.html">
        <img src="image/banner_1.jpg" class="shopimg" />
        <div>
        <p class="name">上海时尚来袭美容院</p>
        <p class="info"><span class="stars star5">星级</span><span class="price">人均：120 元</span></p>
        <p class="addr">地址：XXXXXXX</p>
        <p class="dist">距离：1.5km</p>
        </div>
        </a>
      </li>
      <li>
        <a href="shopdetail.html">
        <img src="image/banner_1.jpg" class="shopimg" />
        <div>
        <p class="name">上海时尚来袭美容院</p>
        <p class="info"><span class="stars star5">星级</span><span class="price">人均：120 元</span></p>
        <p class="addr">地址：XXXXXXX</p>
        <p class="dist">距离：1.5km</p>
        </div>
        </a>
      </li>
      <li>
        <a href="shopdetail.html">
        <img src="image/banner_1.jpg" class="shopimg" />
        <div>
        <p class="name">上海时尚来袭美容院</p>
        <p class="info"><span class="stars star5">星级</span><span class="price">人均：120 元</span></p>
        <p class="addr">地址：XXXXXXX</p>
        <p class="dist">距离：1.5km</p>
        </div>
        </a>
      </li>
      </ul>
      
      <div class="load_more">
        <a href="javascript:;" class="load">加载更多</a>
        <p class="state">加载状态</p>
      </div>
    
    </div>
    </div>
    
    <div class="gotoTop">Top</div>
    
    <!-- footer -->
    <div class="footer">
      <ul>
      <li><a href="index.html"><img src="icons/ft_home.png" /><p>首页</p></a></li>
      <li class="selected"><a href="shoplist.html"><img src="icons/ft_list.png" /><p>商户</p></a></li>
      <li><a href="services.html"><img src="icons/ft_service.png" /><p>服务</p></a></li>
      <li><a href="discount.html"><img src="icons/ft_discount.png" /><p>优惠</p></a></li>
      <li><a href="usercenter.html"><img src="icons/ft_user.png" /><p>用户</p></a></li>
      </ul>
    </div>
    
    <!-- set city -->
    <div id="set_city">
      <div>
      
      <div class="header">
        <a href="javascript:;" class="pos-l icon hd-return">返回</a>
        <h1 class="hd-title">选择城市</h1>
      </div>
      
      <p class="tips">已开通服务的城市：</p>
      
      <div class="citys">
      <ul>
      <li><a href="javascript:;">北京市</a></li>
      <li><a href="javascript:;">成都市</a></li>
      <li class="selected"><a href="javascript:;">上海市</a></li>
      <li><a href="javascript:;">杭州市</a></li>
      <li><a href="javascript:;">天津市</a></li>
      <li><a href="javascript:;">广州市</a></li>
      <li><a href="javascript:;">深圳市</a></li>
      <li><a href="javascript:;">青岛市</a></li>
      <li><a href="javascript:;">南京市</a></li>
      <li><a href="javascript:;">三亚市</a></li>
      <li><a href="javascript:;">重庆市</a></li>
      <li><a href="javascript:;">北京市</a></li>
      <li><a href="javascript:;">天津市</a></li>
      <li><a href="javascript:;">广州市</a></li>
      <li><a href="javascript:;">深圳市</a></li>
      <li><a href="javascript:;">青岛市</a></li>
      <li><a href="javascript:;">南京市</a></li>
      <li><a href="javascript:;">三亚市</a></li>
      <li><a href="javascript:;">名字很长的城市</a></li>
      </ul>
      </div>
      
      </div>	
    </div>
    
    <!-- set chanel -->
    <div id="set_chanel">
      <div>
      
      <div class="header">
        <a href="javascript:;" class="pos-l icon hd-return">返回</a>
        <h1 class="hd-title">选择频道</h1>
      </div>
      
      <div class="chanels">
      <p class="cate hot">热门</p>
      <ul>
      <li><a href="javascript:;">频道 1</a></li>
      <li><a href="javascript:;">频道 2</a></li>
      <li><a href="javascript:;">频道 3</a></li>
      <li><a href="javascript:;">频道 2</a></li>
      <li><a href="javascript:;">频道 3</a></li>
      <li><p>fill stuff</p></li>
      </ul>
      <p class="cate liren">丽人</p>
      <ul>
      <li><a href="javascript:;">美容美体</a></li>
      <li class="selected"><a href="javascript:;">美发</a></li>
      <li><a href="javascript:;">美甲</a></li>
      </ul>
      </div>
      
      </div>
    </div>
    
    <!-- Filter-->
    <div id="Filter">
      <div>
      
      <div class="header">
        <a href="javascript:;" class="pos-l icon hd-return">返回</a>
        <h1 class="hd-title">筛选</h1>
      </div>
      
      <div class="fm">
      
      <label>品牌：</label>
      <input type="hidden" class="brand" />
      <ul class="selectlist">
      <li class="selected">品牌 1</li>
      <li>品牌 2</li>
      <li>品牌 3</li>
      <li>品牌 4</li>
      </ul>
      
      <label>行政区域：</label>
      <div class="area">
      <select class="area_l1">
      <option>请选择</option>
      <option>徐汇区</option>
      <option>浦东新区</option>
      <option>闵行区</option>
      </select>
      <select class="area_l2">
      <option>请选择</option>
      </select>
      </div>
      
      <label>价格：</label>
      <div class="price">
      <input type="text" class="min" placeholder="最小价格" /><span>-</span>
      <input type="text" class="max" placeholder="最大价格" />
      </div>
      
      </div>
      
      <div class="btns">
        <a href="javascript:;" class="btn">确定</a>
      </div>
      
      </div>
    </div>
  
  </div>

</body>
</html>